<template>
  <movie>
    <div slot="mo-left">
      <div class="mo-tit"><h5>片库</h5></div>
      <div class="mo-text">
        <ul>
          <li><a href="#"><p>最近热门</p></a></li>
          <li><a href="#"><p>免费电影</p></a></li>
          <li><a href="#"><p>会员专属</p></a></li>
        </ul>
      </div>
      <div class="mo-text">
        <ul>
          <li><a href="#"><p>最近上线</p></a></li>
          <li><a href="#"><p>院线大片</p></a></li>
          <li><a href="#"><p>评分最高</p></a></li>
        </ul>
      </div>
    </div>
    <div slot="mo-conter">
       <div class="mo-tit"><h5>地区</h5></div>
      <div class="mo-text">
        <ul>
          <li><a href="#"><p>华语</p></a></li>
          <li><a href="#"><p>美国</p></a></li>
          <li><a href="#"><p>欧洲</p></a></li>
        </ul>
      </div>
      <div class="mo-text">
        <ul>
          <li><a href="#"><p>日本</p></a></li>
          <li><a href="#"><p>韩国</p></a></li>
          <li><a href="#"><p>泰国</p></a></li>
        </ul>
      </div>
    </div>
    <div slot="mo-right">
       <div class="mo-tit"><h5>分类</h5></div>
      <div class="mo-text">
        <ul>
          <li><a href="#"><p>喜剧</p></a></li>
          <li><a href="#"><p>悲剧</p></a></li>
          <li><a href="#"><p>爱情</p></a></li>
          <li><a href="#"><p>动作</p></a></li>
          <li><a href="#"><p>犯罪</p></a></li>
          <li><a href="#"><p>恐怖</p></a></li>
        </ul>
      </div>
      <div class="mo-text">
        <ul>
          <li><a href="#"><p>动画</p></a></li>
          <li><a href="#"><p>家庭</p></a></li>
          <li><a href="#"><p>科幻</p></a></li>
          <li><a href="#"><p>战争</p></a></li>
          <li><a href="#"><p>青春</p></a></li>
          <li><a href="#"><p>悬疑</p></a></li>
        </ul>
      </div>
    </div>
  </movie>
</template>

<script>
import Movie from './Movie'
export default {
  name:'MovieItem',
  components:{
    Movie
  }
}
</script>

<style scoped>
 .mo-text ul{
   display: flex;
 }
 .mo-tit{
   padding: 10px 0 5px 30px;
   color: #cfcfcf;
 }
 .mo-text ul li{
   padding-left: 30px;
   
 }
 .mo-text p{
   font-size: 16px;
   color: #000;
 }
 .mo-text a:hover{
   text-decoration: none;
 }
 .mo-text p:hover{
   color: springgreen;
 }
</style>